<template>

    <div class="modifyPasswordBox">
        <div class="modifyBox">
            <div class="godforget-header">
                <h2>修改密码</h2>
                <div class="godforget-line"></div>
            </div>
            <el-form :label-position="labelPosition" :model="ruleForm" status-icon :rules="rules" 
                ref="ruleForm" label-width="100px" class="demo-ruleForm"
            >
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input type="password" v-model.number="ruleForm.oldPassword" placeholder="请输入旧密码" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                    <el-input :type="passwordType" v-model="ruleForm.pass"  placeholder="请输入新密码" auto-complete="off"></el-input>
                    <div @click="mingan($event)" class="inputTip">
                        <i class="el-icon-view" ></i>
                        <span class="slash"></span>
                    </div>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass"  placeholder="请再次输入新密码" auto-complete="off"></el-input>
                    <div @click="mingan($event)" class="inputTip">
                        <i class="el-icon-view" ></i>
                        <span class="slash"></span>
                    </div>
                </el-form-item>
                <p class="tip">密码要求至少包含字母、符号或数字中的两项且长度超过6位</p>
            
                <el-form-item>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 密码更改完成dialog -->
        <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <!-- content -->
        <div class="dialogContent">
            <div class="content-left"><img src="../../static/image/forget-human.png" alt=""></div>
            <div class="content-right">
            <p>密码更改完成</p>
            <el-button type="primary" @click="dialogVisible = false" class="confirm">确认</el-button>
            </div>
        </div>
        <!-- content end-->
        </el-dialog>
        <!-- 密码更改完成dialog  end-->

        <!-- 服务器未响应dialog -->
        <el-dialog title="" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
            <!-- <span>这是一段信息</span> -->
            <!-- content -->
            <div class="dialogContent">
                <div class="content-left"><img src="../../static/image/danger.png" alt="" class="dangerImg"></div>
                <div class="content-right">
                <p>密码更改完成</p>
                <span class="right-words">请检查网络并稍后尝试</span>
                <el-button type="primary" @click="dialogVisible = false" class="confirm">确认</el-button>
                </div>
            </div>
            <!-- content end-->
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>

        <!-- 服务器未响应dialog end-->
    </div>
</template>
<script>
    export default {
        data(){
            var validateOldPass = (rule,value,callback) =>{
                if(!value){
                    return callback(new Error('旧密码不能为空'));
                }
                else{
                    callback();
                }
                
                
                
            };
            var validatePass = (rule, value, callback) => {
                // let daReg = /.*[A-Z]+.*[A-Z]+.*/
                // let xiaoReg = /.*[a-z]+.*[a-z]+.*/
                // let numberReg = /.*[0-9]+.*[0-9]+.*/
                // let fuhaoReg = /.*[\~\!\@\#\$\%\^\&\*\(\)\_\+\=\-\[\]\{\}\;\:\'\"\\\|\,\<\.\>\/\?]+.*[\~\!\@\#\$\%\^\&\*\(\)\_\+\=\-\[\]\{\}\;\:\'\"\\\|\,\<\.\>\/\?]+.*/
                // console.log(daReg.test(value) && xiaoReg.test(value) && numberReg.test(value) && fuhaoReg.test(value));
                // 检测匹配项
                let count = 0;
                let daReg = /.*[A-Z]+.*/
                let xiaoReg = /.*[a-z]+.*/
                let numberReg = /.*[0-9]+.*/
                let fuhaoReg = /.*[\~\!\@\#\$\%\^\&\*\(\)\_\+\=\-\[\]\{\}\;\:\'\"\\\|\,\<\.\>\/\?]+.*/
                if(daReg.test(value)) {
                    count++;
                }
                if(xiaoReg.test(value)) {
                    count++;
                }
                if(numberReg.test(value)) {
                    count++;
                }
                if(fuhaoReg.test(value)) {
                    count++;
                }
                //console.log(count >= 2 && value.length >=6)
            
                if (value === '') {
                    callback(new Error('请您填写新密码'));
                } else if (!(value.length >= 6 && value.length <= 12)) {
                    callback(new Error('密码长度6-12位'));
                } else if (!(count >= 2)){
                    callback(new Error('大写字母、小写字母、数字和标点符号至少包含2种'));
                } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次填写新密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                // 对齐方式
                labelPosition:'top',
                 ruleForm: {
                    oldPassword:'',
                    pass: '',
                    checkPass: '',
                  },
                  rules: {
                    oldPassword:[
                        { validator: validateOldPass, trigger: 'blur', }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur', required: true }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur', required: true }
                    ],
                    
                  },
                  passwordType:'password',
                  // 密码更改完成
                  dialogVisible:false,
                  // 服务器未响应
                  dialogVisible2:false,
            }

        },
        methods:{
            // 确认
            submitForm(formName) {
        
                this.$refs[formName].validate((valid) => {
                    console.log(valid)
                if (valid) {
                    alert('submit!');
                    this.dialogVisible = true;
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            // 取消
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            mingan(e){
                let type = e.currentTarget.previousElementSibling.getElementsByTagName('input')[0];
                if (e.currentTarget.getElementsByTagName('span')[0].style.display == 'inline-block'){
                    e.currentTarget.getElementsByTagName('span')[0].style.display = 'none';
                }else{
                    e.currentTarget.getElementsByTagName('span')[0].style.display = 'inline-block';
                }
                if (type.getAttribute('type') == 'password'){
                    type.setAttribute('type','text')
                    // this.passwordType = 'text';
                }else{
                    type.setAttribute('type','password')
                    // this.passwordType = 'password';
                }
                
            },
            // dialog
            handleClose(done) {
                //密码更改完成
                this.dialogVisible = false;
                // 服务器未响应
                this.dialogVisible2 = false;
                // this.$confirm('确认关闭？')
                //   .then(_ => {
                //     done();
                //   })
                //   .catch(_ => {});
            }
        }
    }
</script>

